<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/javascripts/layui/css/layui.css">
    <title>登录</title>
    <style>
        .bg {
            background-image: url(/images/login.jpg);
            background-position: center top;
            background-size: cover;
            min-height: 540px;
        }
        .login {
            width: 500px;
            background: #FFF;
            height: 100%;
            position: absolute;
            right: 0;
        }
        .login .content {
            padding-top: 150px;
        }
        @media screen and (max-width: 1500px) {
            .login {
                width: 400px;
            }
        }
        .captcha {
            cursor: pointer;
        }
        .btn {
            margin: 0 auto;
            width: 180px;
        }
        .layui-btn {
            width: 100%;
        }
    </style>
</head>

<body class="bg layout-full page-dark">

    <div class="layui-form login">
        <div class="content">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="tel" id="name" name="name" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="password" name="password" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="tel" id="captcha" name="captcha" maxlength="4" class="layui-input">
                    </div>
                    <span class="captcha" id="captcha_code"></span>
                </div>
            </div>
            <div class="btn">
                <button class="layui-btn layui-btn-warm">登录</button>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="/javascripts/layui/layui.js"></script>
<script type="text/javascript" src="/javascripts/lib/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/javascripts/lib/md5.js"></script>
<script type="text/javascript" src="/javascripts/base.js"></script>
<script type="text/javascript">
    (function () {

        var Base = window.Base;

        $('#captcha_code').on('click', function () {
            Base.ajax.request({
                url: "/captcha/createCaptcha",
                cb: function (res) {
                    $('#captcha_code').html(res.captacha);
                    $('#captcha').data('token', res.token);
                }
            })
        }).click();


        Base.util.loadLayuiModel('layer', function (object) {
            var layer = object.layer;

            $('.layui-btn').on('click', function () {
                var name = $('#name').val(),
                    password = $.md5($('#password').val()),
                    captcha = $('#captcha').val(),
                    token = $('#captcha').data('token');
                Base.ajax.post({
                    url: "/user/login",
                    data: { name, password, captcha, token },
                    cb: function (res) {

                    },
                    warn: function(res) {
                        layer.msg(res.message);
                    }
                })
            })
        }) 

    })()

</script>

</html>